{% block sw_customer_detail %}
<sw-page class="sw-customer-detail">
    {% block sw_customer_detail_header %}
    <template
        v-if="!isLoading"
        #smart-bar-header
    >
        <h2>
            {{ salutation(customer) }}
        </h2>
        <sw-label
            v-if="customer?.createdById"
            appearance="pill"
            size="small"
            class="sw-customer-detail__created-by-admin-label"
        >
            {{ $tc('sw-customer.detail.labelCreatedByAdmin') }}
        </sw-label>
    </template>
    {% endblock %}

    {% block sw_customer_detail_actions %}
    <template #smart-bar-actions>
        {% block sw_customer_detail_actions_edit %}
        <span v-if="!editMode">
            <mt-button
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: acl.can('customer.editor'),
                    showOnDisabledElements: true
                }"
                class="sw-customer-detail__open-edit-mode-action"
                variant="primary"
                :disabled="isLoading || !acl.can('customer.editor')"
                size="default"
                @click.prevent="onActivateCustomerEditMode"
            >
                {{ $tc('sw-customer.detail.buttonEdit') }}
            </mt-button>
        </span>
        {% endblock %}

        <span v-else>
            {% block sw_customer_detail_actions_cancel %}
            <mt-button
                :disabled="isLoading"
                variant="secondary"
                size="default"
                @click="onAbortButtonClick"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_customer_detail_actions_save %}
            <sw-button-process
                class="sw-customer-detail__save-action"
                :is-loading="isLoading"
                :process-success="isSaveSuccessful"
                :disabled="isLoading"
                variant="primary"
                @update:process-success="saveFinish"
                @click.prevent="onSave"
            >
                {{ $tc('sw-customer.detail.buttonSave') }}
            </sw-button-process>
            {% endblock %}
        </span>
    </template>
    {% endblock %}

    <template #language-switch>
        <sw-language-switch
            :abort-change-function="abortOnLanguageChange"
            :save-changes-function="saveOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>

    {% block sw_customer_detail_content %}
    <template #content>
        <sw-card-view>
            {% block sw_customer_detail_content_customer_group_registration %}
            <div class="sw-customer-detail__customer-registration-alert">
                <mt-banner
                    v-if="customer && customer.requestedGroup"
                    variant="info"
                >
                    {% block sw_customer_detail_content_customer_group_registration_content %}
                    <div class="sw-customer-detail__customer-registration-alert-text">
                        {% block sw_customer_detail_content_customer_group_registration_message %}
                        {{ $tc('sw-customer.customerGroupRegistration.alert', { name: customer.requestedGroup.translated.name }, 0) }}
                        {% endblock %}
                    </div>
                    <div class="sw-customer-detail__customer-registration-alert-actions">
                        {% block sw_customer_detail_content_customer_group_registration_actions %}
                        <mt-button
                            variant="critical"
                            size="small"
                            @click="declineCustomerGroupRegistration"
                        >
                            {{ $tc('sw-customer.customerGroupRegistration.decline') }}
                        </mt-button>

                        <mt-button
                            variant="primary"
                            size="small"
                            @click="acceptCustomerGroupRegistration"
                        >
                            {{ $tc('sw-customer.customerGroupRegistration.accept') }}
                        </mt-button>
                        {% endblock %}
                    </div>
                    {% endblock %}
                </mt-banner>
            </div>
            {% endblock %}

            {% block sw_customer_detail_content_tabs %}
            <sw-tabs
                class="sw-customer-detail-page__tabs"
                position-identifier="sw-customer-detail-tabs"
            >
                {% block sw_customer_detail_content_tab_general %}
                <sw-tabs-item
                    class="sw-customer-detail__tab-general"
                    :route="generalRoute"
                    :title="$tc('sw-customer.detail.tabGeneral')"
                    :has-error="swCustomerDetailBaseError"
                >
                    {{ $tc('sw-customer.detail.tabGeneral') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_customer_detail_content_tab_addresses %}
                <sw-tabs-item
                    class="sw-customer-detail__tab-addresses"
                    :route="addressesRoute"
                    :title="$tc('sw-customer.detail.tabAddresses')"
                >
                    {{ $tc('sw-customer.detail.tabAddresses') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_customer_detail_content_tab_order %}
                <sw-tabs-item
                    class="sw-customer-detail__tab-order"
                    :route="ordersRoute"
                    :title="$tc('sw-customer.detailBase.labelOrderCard')"
                >
                    {{ $tc('sw-customer.detailBase.labelOrderCard') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_customer_detail_content_tab_after %}{% endblock %}
            </sw-tabs>
            {% endblock %}

            <sw-extension-component-section
                position-identifier="sw-customer-detail__before-content"
            />

            {% block sw_customer_detail_content_view %}
            <template v-if="isLoading">
                <sw-skeleton variant="detail-bold" />
                <sw-skeleton />
            </template>

            <router-view
                v-if="customer"
                v-slot="{ Component }"
            >
                {# v-show is used here as underlying components influence the loading state and v-if would destroy this behaviour #}
                <component
                    :is="Component"
                    v-show="!isLoading"
                    :customer="customer"
                    :customer-edit-mode="editMode"
                />
            </router-view>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
